<template>
  <!-- 协催管理-诉讼待分配-页面 -->
  <section class="page assist-visit-stay">
    <data-form :model="searchModel" @handleResetForm="handleResetForm" @onSearch="refreshData">
      <template slot="inputs">
        <el-form-item label="订单编号" prop="caseNumber">
          <el-input v-model="searchModel.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="personalName">
          <el-input v-model="searchModel.personalName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobileNo">
          <el-input v-model="searchModel.mobileNo"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="searchModel.idCard"></el-input>
        </el-form-item>
        <el-form-item label="欠款金额" prop="overdueAmount">
          <number-range :isInteger="true" v-model="searchModel.overdueAmount"></number-range>
        </el-form-item>
        <el-form-item label="逾期期数" prop="overduePeriod">
          <el-select clearable placeholder="请选择" v-model="searchModel.overduePeriod">
            <el-option :key="index" :label="name" :value="code.replace(/M|\+/, '')" v-for="{index,name,code} in $dict.getDictData('OverduePeriodStatus')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="逾期天数" prop="overdueDays">
          <number-range :isInteger="true" v-model="searchModel.overdueDays"></number-range>
        </el-form-item>
        <el-form-item label="产品类型" prop="productCategory">
          <el-input v-model="searchModel.productCategory"></el-input>
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="searchModel.productName"></el-input>
        </el-form-item>
        <el-form-item label="诉讼编号" prop="lawNumber">
          <el-input v-model="searchModel.lawNumber"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="creatTime">
          <el-date-picker :editable="false" clearable placeholder="选择日期时间" type="daterange" v-model="searchModel.creatTime"></el-date-picker>
        </el-form-item>
        <el-form-item label="案件标签" prop="labelName">
          <get-label-name :formModel="searchModel" v-model="searchModel.labelName"></get-label-name>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="dataSet" :page="pageService" :selectionList.sync="selectionList" @onPageChange="refreshData">
      <template slot="buttons">
        <el-button @click="manualDivision" v-auth="1511">诉讼分案</el-button>
        <el-button @click="outsourceManualDivision" v-auth="1512">委外诉讼分案</el-button>
      </template>
      <template slot="columns">
        <el-table-column :min-width="$helper.getColumnWidth(6)" label="订单编号" prop="caseNumber" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button @click="openExecutionPage(scope.row)" type="text">{{scope.row.caseNumber}}</el-button>
          </template>
        </el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(6)" label="诉讼编号" prop="lawNumber" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(3)" label="客户姓名" prop="personalName" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="手机号" prop="mobileNo" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(6)" label="身份证号" prop="idCard" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="欠款金额(元)" prop="overdueAmount" show-overflow-tooltip></el-table-column>
        <el-table-column :formatter="row => $common.isNotValue(row.overduePeriod) ? '':`M${row.overduePeriod}`" :min-width="$helper.getColumnWidth(3)" label="逾期期数" prop="overduePeriod"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(3)" label="逾期天数" prop="overdueDays" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(3)" label="产品类型" prop="productCategory" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(3)" label="产品名称" prop="productName" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="电催/外访催收员" prop="currentCollectorRealName" show-overflow-tooltip></el-table-column>
        <el-table-column :formatter="(row) => $filter.dateTimeFormat(row.createTime)" :min-width="$helper.getColumnWidth(4)" label="案件创建时间" prop="createTime" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(10)" label="案件标签" prop="labelName"></el-table-column>
      </template>
    </data-box>

    <!-- 诉讼分案 -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" :visible.sync="dialog.ManualDivision" title="分案" width="800px" @open="$nextTick(()=>$refs['case-allot'].refreshDept())">
      <case-allot :fromChannel="caseChannel" @close="dialog.ManualDivision=false" @refreshList="refreshData" ref="case-allot"></case-allot>
    </el-dialog>

    <!-- 委外诉讼分案 -->
    <!-- <el-dialog title="委外诉讼分案" :visible.sync="dialog.OutManualDivision" width="800px" :show-close="false"
               :close-on-click-modal="false" :close-on-press-escape="false"
               @open="$nextTick(()=>$refs['user-case-allot'].refresh(OutLawDepartmentDataNoRoot,collectionType))">
      <user-case-allot :selectedCase="selectionList" @refreshList="refreshData" ref="user-case-allot"
                       @close="dialog.OutManualDivision=false"></user-case-allot>
    </el-dialog>-->
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies, Layout, Auth } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import CaseAllot from "~/components/distribution-common/case-allot.vue";
import NumberRange from "~/components/common/number-range.vue";
import { CaseAssitVisitStayService } from "~/services/domain-service/case-assist-visit-stay.service.ts";
import { CASE_CHANNEL, MENU_CHANNEL } from "~/config/enum.config";
import { Getter, namespace } from "vuex-class";
import GetLabelName from "~/components/labeling-strategy/get-label-name.vue";

const AllotModule = namespace("case-allot");

@Auth(1503)
@Layout("workspace")
@Component({
  components: {
    GetLabelName,
    CaseAllot,
    NumberRange
  }
})
export default class AssistCisitWaitDistribution extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(CaseAssitVisitStayService)
  private caseAssitVisitStayService: CaseAssitVisitStayService;
  @AllotModule.Mutation private updateCaseIds;
  @AllotModule.Mutation private updateExtData;

  @Getter
  private lawDepartmentDataNoRoot;
  @Getter
  private OutLawDepartmentDataNoRoot;

  private caseChannel = CASE_CHANNEL.law;
  private searchModel: any = {
    areaIds: [],
    areaId: "",
    addressDetail: "",
    overdueDays: {
      max: "",
      min: ""
    },
    overdueAmount: {
      max: "",
      min: ""
    },
    turnSource: "",
    productCategory: "",
    creatTime: [],
    productName: "",
    lawNumber: "",
    caseNumber: "",
    overduePeriod: "",
    customerCategory: "",
    labelName: []
  };
  private dataSet: any[] = [];
  private selectionList: any[] = [];
  private caseIds: any[] = [];
  private dialog: any = {
    ManualDivision: false, //诉讼分案
    OutManualDivision: false //
  };

  private created() {
    this.refreshData();
  }

  private refreshData() {
    this.caseAssitVisitStayService
      .searchPendingList(this.searchModel, this.pageService, this.sortService)
      .subscribe(data => {
        this.dataSet = data;
        this.selectionList = [];
      });
  }

  /**
   * 分案
   */
  private manualDivision() {
    if (this.selectionList.length === 0) {
      this.$message.info("请选择要分配的案件");
      return;
    }
    this.updateCaseIds(this.selectionList.map(v => v.caseId));
    const caseAssistIds = this.selectionList.map(v => v.id);
    this.updateExtData({ caseAssistIds });
    this.dialog.ManualDivision = true;
  }

  /**
   * 获取地区id
   */
  private getAreaId() {
    this.searchModel.areaId =
      this.searchModel.areaIds.length > 0
        ? this.searchModel.areaIds[this.searchModel.areaIds.length - 1]
        : "";
  }

  /**
   * 委外诉讼分案
   */
  private outsourceManualDivision() {
    if (this.selectionList.length === 0) {
      this.$message.info("请选择要分配的委外诉讼分案");
      return;
    }
    this.caseIds = [];
    this.selectionList.map(v => {
      this.caseIds.push(v.id);
    });
    this.$confirm(`是否确定分配到委外诉讼?`, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        this.caseAssitVisitStayService
          .outsourcingCases({
            caseIds: this.caseIds
          })
          .subscribe(data => {
            this.$message.success("分配成功");
            this.refreshData();
          });
      })
      .catch(() => { });
    //    //用来区分接口
    //    this.collectionType = 'LAW_STAY_OUTSOURCE';
    //    this.dialog.OutManualDivision = true;
  }

  /**
   * 进入查看执行页
   */
  private openExecutionPage(row) {
    this.$router.openCaseDetail(row.caseId, {
      menuChannel: MENU_CHANNEL.Lawsuit_await,
      hiddenCaseList: true,
      hiddenAction: true
    });
  }

  /**
   * 范围输入框的重置
   */
  private handleResetForm() {
    this.searchModel.overdueAmount = { min: "", max: "" };
    this.searchModel.overdueDays = { max: "", min: "" };
  }
}
</script>

<style lang="less">
</style>
